<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { orderStatus } from '@/constants/index';
import OrderItem from './components/orderItem.vue';
import { http } from '@/utils/request';
import type { OrderListInfo } from '@/types/index';
let activeName = ref(orderStatus[0].name);

const query = reactive({
  page: '1',
  pageSize: '5',
  orderState: '',
});

const OrderList = ref<OrderListInfo>();

onMounted(() => {
  getOrderList();
});

async function getOrderList() {
  const res = await http<OrderListInfo>('GET', '/member/order', query);
  console.log('GET', '/member/order', res.data.result);
  OrderList.value = res.data.result;
}

// 处理tab栏切换功能
function tabCallback({ index }) {
  console.log(index);
  query.orderState = index;
  getOrderList();
}
</script>

<template>
  <div class="member-order">
    <XtxTabs v-model="activeName" @tab-click="tabCallback">
      <XtxTabPane
        v-for="item in orderStatus"
        :key="item.name"
        :name="item.name"
        :label="item.label"
      />
    </XtxTabs>
    <!-- 2. 商品列表 -->
    <div class="order-list" v-if="OrderList">
      <OrderItem v-for="item in OrderList.items" :key="item.id" :order="item" />
    </div>
  </div>
</template>

<style scoped lang="less">
.order-list {
  background-color: #fff;
  padding: 20px;
}
</style>
